<template>
  <!-- 5月11日完成  开发人员：王世龙 -->
  <!-- 头部组件 -->

  <div>
    <main>
      <!-- 背景1 -->
      <div class="bg1">
        <!-- <Header></Header> -->
        <!-- 内容 -->
        <img :src="scsp1.gifUrl" alt="" class="imgss" />
        <div class="son">
          <div class="son1">
            <h2 class="yhwh">{{ scsp1.title }}</h2>
            <p class="gh">
              {{ scsp1.subtitle }}
            </p>
            <el-button type="text" class="open" @click="open"> </el-button>
          </div>
        </div>

        <video
          class="bg_video"
          autoplay
          loop
          preload="auto"
          v-if="videoz"
          controls
        >
          <source :src="scsp1.videoUrl" type="video/mp4" />
        </video>

        <div class="image_icon" @click="refresh" v-if="is_show"></div>
      </div>
      <!-- 背景1 -->
      <!-- 背景2 -->
      <div class="bg2">
        <img :src="ptjs1.backgroundImg" alt="" class="hdtp" />
        <div class="son">
          <div class="son2">
            <span class="gy">关于</span>
            <span class="whgy">{{ ptjs1.title }}</span>
            <!-- <el-button round class="ljgd">了解更多</el-button> -->
            <span class="hdz">{{ ptjs1.description }}</span>
          </div>
        </div>
      </div>
      <!-- 背景2 -->
      <!-- 背景3 -->
      <div class="bg3">
        <span class="dyhstl">大运河生态链</span>
        <span class="wlct">打造文旅发展新引擎、文旅产业新样板</span>

        <img src="./imgs/cloud.png" alt="" class="clouds" v-show="cloud" />
        <img src="./imgs/cloud2.png" alt="" class="clouds2" v-show="clouda" />
        <img src="./imgs/cloud3.png" alt="" class="clouds3" v-show="cloudb" />
        <img src="./imgs/cloud4.png" alt="" class="clouds4" v-show="cloudc" />
        <img src="./imgs/cloud5.png" alt="" class="clouds5" v-show="cloudd" />
        <img src="./imgs/cloud6.png" alt="" class="clouds6" v-show="cloude" />

        <el-button type="text" class="zhjq" @click="over1">
          <span class="zhjq1">智慧景区</span>
        </el-button>
        <el-button type="text" class="zhwb" @click="over2">
          <span class="zhbwg1"> 智慧博物馆</span>
        </el-button>
        <el-button type="text" class="zhwc" @click="over3">
          <span class="zhwc1">智慧文创</span>
        </el-button>
        <el-button type="text" class="zhjd" @click="over4">
          <span class="zhjd1"> 智慧酒店</span>
        </el-button>
        <el-button type="text" class="zhgjx" @click="over5">
          <span class="zhgjx1"> 智慧工具箱</span>
        </el-button>
        <el-button type="text" class="zhbg" @click="over6">
          <span class="zhbg1"> 智慧办公</span>
        </el-button>
      </div>
      <!-- 背景3 -->

      <!-- 背景4 -->
      <div class="seeUp_centent">
        <!-- <div class="show_redx" @click="showRed"></div> -->
        <p>合作伙伴</p>
        <div class="img_box">
          <!-- 合作客户预览图片 -->
          <div v-for="(item, index) in yqlj1" :key="index">
            <img :src="item.partnerLogo" alt="" />
          </div>
        </div>
      </div>
      <!-- 背景4 -->
    </main>
    <!-- 底部组件 -->
    <Header></Header>
    <Footer></Footer>
  </div>
</template>

<script>
import { getLxfss, getYqlj, getXcsp, getPtsj } from "@/api/wslapi/";
// @ is an ael-buttonas to /src
//引入头部组件
import Header from "@/components/Header.vue";
// 引入底部组件
import Footer from "@/components/Footer.vue";
//引入jquery
import $ from "jquery";
$(function () {});
export default {
  created() {},

  // name: "home",
  components: {
    Header,
    Footer,
  },
  created() {
    this.yqlj();
    this.xcsp();
    this.ptjs();
  },
  data() {
    return {
      cloud: true,
      clouda: false,
      cloudb: false,
      cloudc: false,
      cloudd: false,
      cloude: false,
      video: false,
      is_show: false,
      videoz: false,
      shows: true,
      initdata2: [],
      yqlj1: [],
      scsp1: {},
      ptjs1: [],
    };
  },
  methods: {
    ptjs() {
      getPtsj().then((res) => {
        this.ptjs1 = res.data.data;
        // console.log(res.data.data);
      });
    },
    xcsp() {
      getXcsp().then((res) => {
        this.scsp1 = res.data.data;
        // console.log(res.data.data);
      });
    },
    yqlj() {
      getYqlj().then((res) => {
        this.yqlj1 = res.data.data;
        // console.log(res.data.data);
      });
    },
    over1() {
      this.cloud = true;
      this.clouda = false;
      this.cloudb = false;
      this.cloudc = false;
      this.cloudd = false;
      this.cloude = false;
    },
    over2() {
      this.cloud = false;
      this.clouda = true;
      this.cloudb = false;
      this.cloudc = false;
      this.cloudd = false;
      this.cloude = false;
    },
    over3() {
      this.cloud = false;
      this.clouda = false;
      this.cloudb = true;
      this.cloudc = false;
      this.cloudd = false;
      this.cloude = false;
    },
    over4() {
      this.cloud = false;
      this.clouda = false;
      this.cloudb = false;
      this.cloudc = true;
      this.cloudd = false;
      this.cloude = false;
    },
    over5() {
      this.cloud = false;
      this.clouda = false;
      this.cloudb = false;
      this.cloudc = false;
      this.cloudd = true;
      this.cloude = false;
    },
    over6() {
      this.cloud = false;
      this.clouda = false;
      this.cloudb = false;
      this.cloudc = false;
      this.cloudd = false;
      this.cloude = true;
    },
    open() {
      this.video = true;
      this.videoz = true;
      this.is_show = true;
      this.shows = false;
    },
    // move() {
    //   this.cloud = false;
    // },
    refresh() {
      // window.location.reload();
      this.videoz = false;
      this.is_show = false;
      this.shows = true;
    },
  },
  async mounted() {
    const red = await getLxfss();
    //  console.log(red);
    window.onscroll = function () {
      var scrollTop = 0;
      if (document.documentElement && document.documentElement.scrollTop) {
        scrollTop = document.documentElement.scrollTop;
      } else if (document.body) {
        scrollTop = document.body.scrollTop;
      }

      if (scrollTop < 1000) {
        // console.log("ok");
        document.querySelector(".header").style.backgroundColor = "";
      } else {
        // console.log(666666);
        document.querySelector(".header").style.backgroundColor = "black";
      }

      // console.log(scrollTop);
      if (scrollTop > 1000) {
        // console.log("ok");
        if (document.querySelector(".son2")) {
          document.querySelector(".son2").style.display = "block";
        }
        // document.querySelector('.son2').style.animation = 'sport .5s'
        // document.querySelector('.son2').style.transform = 'translateY(0px)'
      } else {
        if (document.querySelector(".son2")) {
          document.querySelector(".son2").style.display = "none";
        }
        // document.querySelector('.son2').style.animation = ''
        // document.querySelector('.son2').style.transform = ''
      }
    };
  },
};
</script>

<style lang="scss" scoped>
.imgss {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
@keyframes sport {
  0% {
    transform: translateY(80px);
    opacity: 1;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}
.son2 {
  animation: sport 1s;
  transform: translateY(0px);
  min-width: 300px;
  height: 80px;
}
.son1 {
  animation: sport 1s;
  transform: translateY(0px);
  min-width: 300px;
  height: 80px;
}
.bg1 {
  margin: 0 !important;
  padding: 0 !important;
  height: 1080px;
  width: 100%;
  overflow: hidden;
  position: relative;
  .bg1_mp4 {
    display: block;
    margin: auto;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
  }
  .open {
    min-width: 100px;
    height: 100px;
    background-image: url(./imgs/open.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 561px;
    left: 250px;
    border-radius: 50%;
  }
  .bg_video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
    position: absolute;
    top: 0;
    left: 0;
  }
  .gh {
    width: 639.9936px;
    height: 33px;
    font-size: 24px;
    font-weight: 400;
    color: #ffffff;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 22.729vw;
    left: 19vw;
    text-align: left;
  }
  .lycb {
    min-width: 412px;
    height: 67px;
    font-size: 48px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    letter-spacing: 3px;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 403.008px;
    left: 360.9984px;
  }
  .yhwh {
    min-width: 412px;
    height: 67px;
    font-size: 48px;
    font-weight: 500;
    color: #ffffff;
    letter-spacing: 3px;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 320.0064px;
    left: 360.9984px;
  }
}
.bg2 {
  height: 55.25vw;
  // background-image: url(./imgs/bg1.jpg);
  background-repeat: no-repeat;
  position: relative;
  background-size: 100%;
  .hdtp {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  .gy {
    min-width: 80px;
    height: 40px;
    font-size: 40px;
    color: #ffffff;
    position: absolute;
    top: 700px;
    left: 360px;
  }
  .whgy {
    width: 300px;
    height: 90px;
    font-size: 32px;
    color: #ffffff;
    position: absolute;
    top: 800px;
    left: 360px;
    text-align: left;
  }
  .hdz {
    width: 650px;
    height: 180px;
    font-size: 20.0064px;
    color: #ffffff;
    position: absolute;
    top: 790.0032px;
    left: 863.0016px;
    text-align: left;
  }
  .ljgd {
    position: absolute;
    top: 931.008px;
    left: 360px;
    color: black;
  }
}
.bg3 {
  height: 1080px;
  background-image: url(./imgs/bg4.jpg);
  position: relative;
  background-repeat: no-repeat;
  background-size: 100% 100%;

  .dyhstl {
    min-width: 248px;
    height: 56px;
    font-size: 40px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    letter-spacing: 1px;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 80.0064px;
    left: 836.0064px;
  }
  .wlct {
    min-width: 357px;
    height: 40px;
    font-size: 20px;
    font-weight: 400;
    color: #ffffff;
    letter-spacing: 1px;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 152.0064px;
    left: 781.9968px;
  }

  .clouds {
    position: absolute;
    top: 412.992px;
    left: 594px;
    width: 732px;
    height: 128px;
  }
  .clouds2 {
    position: absolute;
    top: 412.992px;
    left: 594px;
    width: 732px;
    height: 128px;
  }
  .clouds3 {
    position: absolute;
    top: 412.992px;
    left: 594px;
    width: 712px;
    height: 128px;
  }
  .clouds4 {
    position: absolute;
    top: 412.992px;
    left: 594px;
    width: 732px;
    height: 128px;
  }
  .clouds5 {
    position: absolute;
    top: 412.992px;
    left: 594px;
    width: 732px;
    height: 128px;
  }
  .clouds6 {
    position: absolute;
    top: 412.992px;
    left: 700px;
    width: 533px;
    height: 128px;
  }
  .zhjq {
    height: 76px;
    min-width: 70px;
    font-size: 16px;
    font-weight: 900;
    color: #333333;
    position: absolute;
    top: 653px;
    left: 566px;
    display: flex;
    align-items: flex-start;
    background-image: url(./imgs/ship1.png);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: 0vw 2vw;
    .zhjq1 {
      position: absolute;
      top: 20px;
      color: #333333;
    }
  }
  .zhjq:focus {
    background-image: url(./imgs/colorship1.png);
    color: #856959;
  }
  .zhjq:hover {
    background-image: url(./imgs/colorship3.png);
    height: 100px;
    min-width: 100px;
    background-size: 100%;
    color: #856959;
    background-position: -0.5vw 2vw;
    transition: 1s;
  }
  .zhwb {
    height: 127px;
    min-width: 108px;
    font-size: 16px;
    font-weight: 900;
    color: #333333;
    position: absolute;
    top: 570px;
    left: 654px;
    display: flex;
    align-items: flex-start;
    background-image: url(./imgs/ship2.png);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: -0.5vw 2vw;
    .zhbwg1 {
      position: absolute;
      top: 20px;
      left: 0;
      color: #333333;
    }
  }
  .zhwb:focus {
    background-image: url(./imgs/colorship2.png);
    color: #856959;
  }
  .zhwb:hover {
    background-image: url(./imgs/colorship4.png);
    height: 140px;
    min-width: 130px;
    background-size: 100%;
    color: #856959;
    background-position: -1vw 2vw;
    transition: 1s;
  }
  .zhwc {
    vertical-align: text-top;
    height: 127px;
    min-width: 108px;
    font-size: 16px;
    font-weight: 900;
    color: #333333;
    position: absolute;
    top: 600px;
    left: 800px;
    display: flex;
    align-items: flex-start;
    background-image: url(./imgs/ship2.png);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: -0.7vw 2vw;
    .zhwc1 {
      position: absolute;
      top: 20px;
      left: 3px;
      color: #333333;
    }
  }
  .zhwc:focus {
    background-image: url(./imgs/colorship2.png);
    color: #856959;
  }
  .zhwc:hover {
    background-image: url(./imgs/colorship4.png);
    height: 120px;
    min-width: 130px;
    background-size: 100%;
    color: #856959;
    background-position: -1vw 2vw;
    transition: 1s;
  }
  .zhjd {
    height: 76px;
    min-width: 70px;
    font-size: 16px;
    font-weight: 900;
    color: #333333;
    position: absolute;
    top: 627px;
    left: 950px;
    display: flex;
    align-items: flex-start;
    background-image: url(./imgs/ship1.png);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: 0vw 2vw;
    .zhjd1 {
      position: absolute;
      top: 20px;
      color: #333333;
    }
  }
  .zhjd:focus {
    background-image: url(./imgs/colorship1.png);
    color: #856959;
  }
  .zhjd:hover {
    background-image: url(./imgs/colorship3.png);
    height: 100px;
    min-width: 100px;
    background-size: 100%;
    color: #856959;
    background-position: -0.5vw 2vw;
    transition: 1s;
  }
  .zhgjx {
    height: 76px;
    min-width: 90px;
    font-size: 16px;
    font-weight: 900;
    color: #333333;
    position: absolute;
    top: 581px;
    left: 1080px;
    // display: flex;
    // align-items: flex-start;
    background-image: url(./imgs/ship1.png);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: -0.2vw 2vw;
    .zhgjx1 {
      position: absolute;
      top: 20px;
      left: 0;
      color: #333333;
    }
  }
  .zhgjx:focus {
    background-image: url(./imgs/colorship1.png);
    color: #856959;
  }
  .zhgjx:hover {
    background-image: url(./imgs/colorship3.png);
    height: 100px;
    min-width: 100px;
    background-size: 100%;
    color: #856959;
    background-position: -0.3vw 2vw;
    transition: 1s;
  }
  .zhbg {
    height: 127px;
    min-width: 108px;
    font-size: 16px;
    font-weight: 900;
    color: #333333;
    position: absolute;
    top: 620px;
    left: 1240px;
    display: flex;
    align-items: flex-start;
    background-image: url(./imgs/ship2.png);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: -0.3vw 2vw;
    .zhbg1 {
      position: absolute;
      top: 20px;
      left: 10px;
      color: #333333;
    }
  }
  .zhbg:focus {
    background-image: url(./imgs/colorship2.png);
    color: #856959;
  }
  .zhbg:hover {
    background-image: url(./imgs/colorship4.png);
    height: 100px;
    min-width: 130px;
    background-size: 100%;
    color: #856959;
    background-position: -0.9vw 2vw;
    transition: 1s;
  }
}

.seeUp_centent {
  text-align: center;
  margin: 80px auto;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 1200px;
  background-color: #fff;
  border-radius: 10px;
  padding: 0px 32px;
  p {
    font-size: 40px;
    font-weight: 600;
    color: #333333;
    margin-bottom: 25px;
    margin-top: 20px;
  }
  .img_box {
    margin: 0 auto;
    text-align: left;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    div {
      width: 130px;
      height: 120px;
      margin-left: 93px;
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        // height: 20%;
        display: block;
        width: 100%;
        caret-color: rgba(0, 0, 0, 0);
      }
    }
  }
}
// 新增
.image_icon {
  position: absolute;
  top: 90px;
  right: 10px;
  background-image: url(./imgs/close.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 50px;
  height: 50px;
  cursor: pointer;
  img {
    width: 100%;
    height: 100%;
  }
}
</style>
